<template>
    <div class="app-container">
        <div style="text-align: right; padding-bottom:10px">
            <el-button type="primary" @click="add">添加</el-button>
        </div>
        <el-table :key="tableKey" v-loading="listLoading" :data="tag_list" border fit highlight-current-row style="width: 100%" @sort-change="sortChange">
            <el-table-column :label="$t('table.id')" prop="id" align="center" width="80" :class-name="getSortClass('id')">
                <template slot-scope="{ row }">
                    <span>{{ row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('缩略图')" prop="name" align="center" width="150">
                <template slot-scope="{ row }">
                    <span>
                        <img :src="asset(row.img_thumb)" style="width: 30px;height: 30px" />
                    </span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('场景')" prop="name" align="center" width="150">
                <template slot-scope="{ row }">
                    <span>{{ trans_scene(row.scene) }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('名称')" prop="name" align="center" width="150">
                <template slot-scope="{ row }">
                    <span>{{ row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
                <template slot-scope="{ row, $index }">
                    <el-button v-if="copy_btn" size="mini" type="primary" @click="handleCopy(row, $index)">
                        {{ $t("复制链接") }}
                    </el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(row, $index)">
                        {{ $t("table.delete") }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left: 50px">
                <el-form-item :label="$t('场景')" prop="scene" label-width="100px">
                    <el-select v-model="temp.scene">
                        <el-option value="goods" label="商品">商品</el-option>
                        <el-option value="store" label="门店">门店</el-option>
                        <el-option value="product" label="产品">产品</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('名称')" prop="name" label-width="100px">
                    <el-input v-model="temp.name" type="text" />
                </el-form-item>
                <el-form-item prop="img_thumb" style="margin-bottom: 40px;" label-width="100px" label="缩略图">
                    <image-thumb-upload :field="'img_thumb'" :image-url="asset(temp.img_thumb)" @fileChange="imgThumbChange" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">
                    {{ $t("table.cancel") }}
                </el-button>
                <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">
                    {{ $t("table.confirm") }}
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { asset } from '@/common/js/url'
import { create as createTag, fetchList, deleteTag } from '@/platform/api/tag'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

import ImageThumbUpload from '@/platform/components/ImageThumbUpload'

const defaultFormData = {
    scene: '',
    name: '',
    img_thumb: ''
}

export default {
    components: { Pagination, ImageThumbUpload },
    data() {
        return {
            tag_list: [],
            tableKey: 0,
            total: 0,
            listLoading: true,
            listQuery: {
                page: 1,
                limit: 20,
                importance: undefined,
                title: undefined,
                type: undefined,
                sort: '+id'
            },
            dialogFormVisible: false,
            dialogStatus: '',
            textMap: {
                update: '编辑分类',
                create: '添加分类'
            },
            temp: Object.assign({}, defaultFormData),
            level_list: [],
            rules: {
                scene: [
                    { required: true, message: '请选择标签使用场景', trigger: 'change' }
                ],
                name: [
                    { required: true, message: '请输入标签名称', trigger: 'change' }
                ]
            },
            copy_btn: false
        }
    },
    created() {
        this.getList()
    },
    methods: {
        trans_scene(scene) {
            if(scene == 'store') {
                return '门店'
            } else if (scene == 'goods') {
                return '商品'
            } else if (scene == 'product') {
                return '产品'
            }
            return scene
        },
        asset(path) {
            return asset(path)
        },
        imgThumbChange(data) {
            this.temp.img_thumb = data.file_name
        },
        handleCopy(row, index) {
            var copyContent = '/things/pages/goods/list?type_id=' + row.id;
            var input = document.createElement("input"); // 直接构建input
            input.value = copyContent; // 设置内容
            document.body.appendChild(input); // 添加临时实例
            input.select(); // 选择实例内容
            document.execCommand("Copy"); // 执行复制
            document.body.removeChild(input); // 删除临时实例
            alert("复制成功");
        },
        changeStoreSelect() {

        },
        getList() {
            this.listLoading = true
            fetchList({}).then((res) => {
                this.tag_list = res.data.items
                this.listLoading = false
            })
        },
        add() {
            this.dialogStatus = 'create'
            this.dialogFormVisible = true
        },
        createData() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    const data = this.temp
                    data.slot_id = this.slot_id
                    createTag(data).then((res) => {
                        this.getList()
                        this.$notify({
                            title: '成功',
                            message: '创建成功',
                            type: 'success',
                            duration: 2000
                        })
                        this.dialogFormVisible = false
                    })
                }
            })
        },
        handleDelete(row, index) {
            deleteTag({ id: this.tag_list[index].id }).then((res) => {
                this.$notify({
                    title: '成功',
                    message: '删除成功',
                    type: 'success',
                    duration: 2000
                })
                this.tag_list.splice(index, 1)
            })
        },
        getSortClass(key) {
            const sort = this.listQuery.sort
            return sort === `+${key}` ? 'ascending' : 'descending'
        },
        sortChange(data) {
            const { prop, order } = data
            if (prop === 'id') {
                this.sortByID(order)
            }
        }
    }
}
</script>
